<template>
  <div class="list">
        <ul>
          <li v-for="(item,index) in goodslist" :key="index">
            <img :src="item.img" alt="" width="100%" class="goodsimg">
           <div class="contbo">
              <div class="title">{{item.title}}</div>
              <span>￥{{item.price}}</span>
              <span>销量：</span>
              <img src="https://s10.mogucdn.com/mlcdn/c45406/190717_0a48k9jegh3a0gg2gfgaf3j24bij0_84x84.png" class="play-icon">
           </div>
          </li>
        </ul>
      </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
             goodslist: []
        }
    },
    async mounted(){ 
        await axios.get("/mg/search?_version=8253&ratio=3%3A4&cKey=46&sort=pop&page=2&q=%25E5%25A5%25B3%25E8%25A3%2585&ptp=32._mf1_1239_4537.0.0.wlkXnByL&acm=3.mce.1_10_1u0dq.140653.0.zJD6XsFd11QUJ.pos_882-m_700059-sd_119-mf_4537_1211938-idx_0-mfs_10-dm1_5000&offset=30&_=1628160398505")
        .then(ret =>{
        // console.log(ret.data.result.wall.docs);
        this.goodslist = ret.data.result.wall.docs
        console.log(this.goodslist)
        })
    }  
}
</script>

<style lang="stylus" scoped>
.list 
  height 100%
  background-color #F6F6F6
  ul
        column-count: 2;
        column-gap: 0;
    li
      display flex
      flex-flow row wrap
      justify-content space-around
      align-items flex-startw
      box-sizing border-box
      background-color #eee
      padding 15px 10px
      border-radius 6px
      font-size 13px
      position relative
      &:nth-child(2n)
        padding-left 5px
      img
        border-radius 6px 6px 0 0
        
      .title
        ellipsis(100%,2)
      .play-icon
        width 28px
        height 28px
        position absolute
        top 20px
        right 16px
    .contbo
      height 46px

</style>